<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-row type="flex">
          <el-col>
            <el-button type="primary" style="float:left;" @click="dialogVisible = true">添加页面</el-button>
          </el-col>
          <el-row type="flex">
            <el-col>
              <el-input v-model="title_contains" style="width:500px" placeholder="请输入内容" />
            </el-col>
            <el-col>
              <el-button @click="screenClients">筛选</el-button>
            </el-col>
          </el-row>
        </el-row>
        <el-divider />
        <el-table
          border=""
          :data="employeeList"
          style="width: 100%"
          height="calc(100vh - 280px)"
        >
          <el-table-column
            prop="title"
            label="标题"
            width="450"
          />
          <el-table-column
            prop="content"
            label="内容"
            width="450"
          >
            <template #default="obj3">
              <div v-html="obj3.row.content" />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template #default="obj2">
              <el-button size="small" type="primary" @click="editPerm(obj2.row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delRole(obj2.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <el-row type="flex" justify="center" style="margin-top:10px">
          <!-- 分页 -->
          <pagination ref="pagination" :obj="obj" :total="total" @currentChange="currentChang" @sizeChange="sizeChang" />
        </el-row>
      </el-card>
      <el-dialog
        title="添加页面"
        :visible.sync="dialogVisible"
        width="50%"
        @close="btnCancel"
      >
        <el-form ref="addForm" :model="formData">
          <el-form-item
            label="标题"
            prop="title"
            :rules="[
              { required: true, message: '该项不能为空', trigger: 'blur' },
            ]"
          >
            <el-input v-model="formData.title" type="age" autocomplete="off" />
          </el-form-item>
          <el-form-item
            label="内容"
            prop="content"
            :rules="[
              { required: true, message: '内容不能为空', trigger: 'blur' }, { validator: checkAge, trigger: 'blur' }
            ]"
          >
            <template>
              <div id="App">
                <VueEditor ref="vueEditor" :config="config" />
              </div>
            </template>
          </el-form-item>

        </el-form>
        <el-row slot="footer" class="dialog-footer">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOK">确 定</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>

</template>

<script>

import { getPage, delRole, addyemian, getPermDetail, editPerm, getClientsCount } from '@/api/page'
import VueEditor from 'vue-word-editor'
import 'quill/dist/quill.snow.css'
export default {
  name: 'App',
  components: {
    VueEditor
  },
  data() {
    return {

      // 将分页参数保存到变量中
      currentPage: 1, // 分页当前显示的页码
      obj: { _limit: 2, _start: 0, title_contains: '' },
      // 让总数据先为0
      total: 0,
      title_contains: '',
      config: {
      // 上传图片的配置
        uploadImage: {
          url: 'http://localhost:3000/upload',
          name: 'file',
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert('http://localhost:3000' + res.data.url)
          }
        },

        // 上传视频的配置a
        uploadVideo: {
          url: 'http://localhost:3000/upload',
          name: 'file',
          uploadSuccess(res, insert) {
            insert('http://localhost:3000' + res.data.url)
          }
        }
      },
      employeeList: [],
      dialogVisible: false,

      formData: {
        title: '',
        content: ''
      }
    }
  },

  created() {
    this.getPage()
  },

  methods: {
    checkAge(rule, value, callback) {
      if (value === '<p><br></p>') {
        callback(new Error('不能为空'))
        return
      }
      callback()
    },
    async getPage() {
      const row = await getPage(this.obj)
      console.log(70, row)
      this.employeeList = row.data
      // 获取总条数 , 实现分页
      const { data } = await getClientsCount()
      const res2 = await getPage({ ...this.obj, _limit: data, _start: 0 })
      this.total = res2.data.length
    },
    async delRole(id) {
      // 二次询问
      await this.$confirm('确认删除嘛')
      // 发请求
      await delRole(id)
      // 提示用户
      this.$message.success('删除成功')
      console.log(this.employeeList.length)
      if (this.employeeList.length === 1 && this.$refs.pagination.currentPage !== 1) {
        setTimeout(() => {
          this.$refs.pagination.currentPage--
        }, 200)
        this.obj._start = this.obj._start - this.obj._limit
      }
      // 加载数据

      this.getPage()
    },
    async btnOK() {
      this.formData.content = await this.$refs.vueEditor.editor.root.innerHTML
      console.log(168, this.formData.content)
      // 校验表单
      console.log(1111, this.formData)
      await this.$refs.addForm.validate()
      // 新增和编辑都需要确定事件，所以进行判定，判定的方法是通过id来判定，编辑需要id，新增不需要
      if (this.formData.id) {
        // 发送请求，修改内容后，将数据保存
        await editPerm(this.formData)
      } else {
        await addyemian(this.formData)
      }
      // searchMixin() 混入方法 解决筛选再新增/编辑的问题
      const msg = [this.formData.title]
      const arr = this.searchMixin('', this.obj.title_contains, msg)
      this.obj.title_contains = arr[1]
      // 提示用户
      this.$message.success('添加成功')
      // 关闭弹窗
      this.dialogVisible = false
      // 更新页面

      this.getPage()
      this.$refs.vueEditor.editor.root.innerHTML = ''
    },
    async btnCancel() {
      // 清理表单
      this.formData = {}
      // 清理报错
      this.$refs.addForm.resetFields()
      // 关闭弹窗
      this.dialogVisible = false
      // kong
    },
    async editPerm(id) {
      // 内容回显
      console.log(11, id)
      this.dialogVisible = true
      // console.log(await getPermDetail(id))
      // this.formData = await getPermDetail(id)
      const res = await getPermDetail(id)
      this.formData = res.data
      this.$refs.vueEditor.editor.root.innerHTML = res.data.content
    },
    // 分页点击
    currentChang(page, oldPage) {
      // 计算 _start 改变请求响应的数据
      this.obj._start = (page - oldPage) * this.obj._limit + this.obj._start
      this.getPage()
    },
    // 每页显示条数变化
    sizeChang(val) {
      // 改变每页显示的数量
      this.obj._limit = val
      // 数据从第一条开始显示
      this.obj._start = 0
      this.getPage()
    },
    screenClients() {
      this.obj._start = 0
      this.obj.title_contains = this.title_contains
      this.$refs.pagination.currentPage = 1
      this.getPage()
    }
  }

}
</script>

<style >

</style>
